import { Dropdown, notification } from 'antd';
import { FC } from 'react';

import { post } from '@/api';
import DeleteIcon from '@/assets/icons/delete.svg';
import MoreIcon from '@/assets/icons/more.svg';
import PlusIcon from '@/assets/icons/plus.svg';
import { FlowDeleteModal, FlowDeleteModalRef } from '@/components/complex/FlowDeleteModal';
import { colors } from '@/config/theme';

interface CategoryMoreProps {
  flowId: number;
  refresh: () => void;
}

export const FlowMore: FC<CategoryMoreProps> = memo((props) => {
  const flowDeleteModalRef = useRef<FlowDeleteModalRef>(null);

  const newVersionClick = () => {
    post('/flow/newVersion', {
      params: { flowId: props.flowId }
    }).then(() => {
      notification.success({
        message: '新增版本成功'
      });
      props.refresh?.();
    }).catch(() => {
      notification.error({
        message: '新增版本失败'
      });
    });
  };

  return (
    <>
      <div className="flex items-center gap-8">
        <Dropdown
          arrow
          menu={{
            items: [
              {
                onClick(e) {
                  newVersionClick();
                  e.domEvent.stopPropagation();
                },
                key: '1',
                label: '新增版本',
                icon: <PlusIcon width="18" height="18" />
              },
              {
                onClick(e) {
                  flowDeleteModalRef.current?.open();
                  e.domEvent.stopPropagation();
                },
                key: '1',
                label: <span className="text-red-500">删除</span>,
                icon: <DeleteIcon width="18" height="18" fill={colors.red[500]} />
              }
            ]
          }}>
          <div>
            <MoreIcon onClick={(e: MouseEvent) => e.stopPropagation()} width="18" height="18" fill={colors.primary[500]} />
          </div>
        </Dropdown>
      </div>
      <FlowDeleteModal ref={flowDeleteModalRef} flowId={props.flowId} onSuccess={props.refresh} />
    </>
  );
});
